<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properties -->
  <title>Grid Example - Semantic</title>

  <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/site.css">

  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
</head>
<body>

  <div class="ui text container">
      <h1 class="ui dividing header">Using Grids</h1>

      <h3 class="first">Container</h3>
      <p>A container is a fixed width element that wraps your site's content. It remains a constant size and uses <b>margin</b> to center. Containers are the simplest way to center page content inside a grid.</code>
      </p>
  </div>

  <div class="ui container">
    <div class="ui grid">
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
    </div>
  </div>

  <div class="ui text container">
    <h3 class="first">Text Container</h3>
    <p>Sometimes you just need to put a single column of centered text on a page. A <code>text container</code> is a special type of container optimized for a single flowing column of text, like this instructions on this page.
    </p>
    <p>Text containers <b>do not need to use grids</b> and help simplify basic page layouts.</p>
  </div>

  <div class="ui text container">
    <div class="ui one column grid">
      <div class="column"></div>
    </div>
  </div>


  <div class="ui text container">

      <h1 class="ui dividing header">Grid Content</h1>

      <h3 class="first">Column Flow</h3>
      <p>A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct child of <code>ui grid</code> content will automatically flow to the next row when all the grid columns are taken in the current row</b>.</p>

      <div class="ui grid">
        <div class="four wide column"></div>
        <div class="four wide column"></div>
        <div class="four wide column"></div>
        <div class="four wide column"></div>
        <div class="four wide column"></div>
        <div class="four wide column"></div>
        <div class="four wide column"></div>
        <div class="four wide column"></div>
      </div>

      <h3>Clearing Rows</h3>
      <p>Adding row wrappers allow you to manually specify you want a new row to begin.</p>

      <div class="ui three column grid">
        <div class="column"></div>
        <div class="row">
          <div class="column"></div>
          <div class="column"></div>
          <div class="column"></div>
        </div>
      </div>

      <h3>Specifying Row Width</h3>
      <p>Specifying a grid column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p>
      <div class="ui three column grid">
        <div class="column">column</div>
        <div class="column">column</div>
        <div class="column">column</div>
        <div class="column">column</div>
        <div class="column">column</div>
        <div class="column">column</div>
      </div>

      <h3>Specifying Column Width</h3>
      <p>You can also specify column widths for each column individually</p>
      <div class="ui three column grid">
        <div class="four wide column">four wide column</div>
        <div class="eight wide column">eight wide column</div>
        <div class="four wide column">four wide column</div>
      </div>

      <h3>Special Variations</h3>
      <p>Some special variations that format grids like tables require you to specify rows. For example a <code>divided grid</code> or a <code>celled grid</code> requires row wrappers.</p>

      <div class="ui horizontal section divider">Celled Grid</div>
      <div class="ui celled grid">
        <div class="row">
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
        </div>
        <div class="row">
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
        </div>
      </div>

      <div class="ui horizontal section divider">Internally Celled Grid</div>

      <div class="ui internally celled grid">
        <div class="row">
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
        </div>
        <div class="row">
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
        </div>
      </div>


      <div class="ui horizontal section divider">Divided Grid</div>

      <div class="ui divided grid">
        <div class="row">
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
        </div>
        <div class="row">
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
        </div>
      </div>

      <div class="ui horizontal section divider">Vertically Divided Grid</div>

      <div class="ui vertically divided grid">
        <div class="row">
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
        </div>
        <div class="row">
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
          <div class="four wide column"></div>
        </div>
      </div>

      <h1 class="ui dividing header">Adjusting Grids</h1>


      <h3 class="first">Centering Content</h3>
      <p>If a row does not take up all sixteen grid columns, you can use a <code>ui centered grid</code>, <code>centered row</code>, or <code>centered column</code> to center the column contents inside the grid.
      </p>
      <div class="ui two column centered grid">
        <div class="column"></div>
        <div class="four column centered row">
          <div class="column"></div>
          <div class="column"></div>
        </div>
      </div>

      <h3>Floating Rows</h3>
      <p>Since Semantic UI's grid is based on flex box, a <code>left floated</code> item should come first, and a <code>right floated</code> item last in its row.</p>

      <div class="ui grid">
        <div class="left floated six wide column">
          <div class="ui segment">
            Left floated
          </div>
        </div>
        <div class="right floated six wide column">
          <div class="ui segment">
            Right floated
          </div>
        </div>
      </div>


      <h3>Text Alignment</h3>
      <p>You can specify text alignment using alignment variations on a grid, row, or column level.</p>

      <div class="ui grid">
        <div class="right aligned eight wide column">
          right aligned column
        </div>
        <div class="left aligned eight wide column">
          left aligned column
        </div>
        <div class="center aligned two column row">
          <div class="column">
            center aligned row
          </div>
          <div class="column">
            center aligned row
          </div>
        </div>
        <div class="sixteen wide right aligned column">
          right aligned column
        </div>
      </div>

      <h3>Vertical Alignment</h3>
      <p>You can specify vertical alignment on a grid, row, or column level.</p>
      <div class="ui middle aligned four column centered grid">
        <div class="row">
          <div class="column">
            <img class="ui wireframe image" src="assets/images/wireframe/image.png">
          </div>
          <div class="column">
            <img class="ui wireframe image" src="assets/images/wireframe/image.png">
            <img class="ui wireframe image" src="assets/images/wireframe/image.png">
          </div>
          <div class="column">
            <img class="ui wireframe image" src="assets/images/wireframe/image.png">
          </div>
        </div>
      </div>

      <h3>Equal Width Columns</h3>
      <p>Specifying an <code>equal width grid</code> will automatically determine column sizes to fit evenly inside one row</p>
      <div class="ui equal width grid">
        <div class="row">
          <div class="column">column</div>
          <div class="column">column</div>
          <div class="column">column</div>
          <div class="column">column</div>
        </div>
        <div class="row">
          <div class="column">column</div>
          <div class="column">column</div>
          <div class="column">column</div>
        </div>
      </div>


      <h1>Responsive Patterns</h1>

      <h3 class="first">Doubling</h3>
      <p>You can set columns to double in width at each device jump</p>
      <div class="ui five column doubling grid">
        <div class="column">column</div>
        <div class="column">column</div>
        <div class="column">column</div>
        <div class="column">column</div>
        <div class="column">column</div>
      </div>

      <h3>Stackable</h3>
      <p>You can set columns to stack on mobile</p>
      <div class="ui three column stackable grid">
        <div class="column">column</div>
        <div class="column">column</div>
        <div class="column">column</div>
      </div>

      <h3>Responsive Width Adjustments</h3>
      <p>You can specify columns to appear at different widths on different screens</p>

      <div class="ui grid">
        <div class="eight wide mobile six wide tablet four wide computer column"></div>
        <div class="eight wide mobile six wide tablet four wide computer column"></div>
        <div class="eight wide mobile six wide tablet four wide computer column"></div>
        <div class="eight wide mobile six wide tablet four wide computer column"></div>
        <div class="eight wide mobile six wide tablet four wide computer column"></div>
      </div>
      <div class="ui grid">
        <div class="four wide two wide large screen one wide widescreen column"></div>
        <div class="four wide two wide large screen one wide widescreen column"></div>
        <div class="four wide two wide large screen one wide widescreen column"></div>
        <div class="four wide two wide large screen one wide widescreen column"></div>
      </div>

      <h3>Specifying Device Visibility</h3>
      <p>You can specify columns to appear only a particular screen</p>
      <div class="ui grid">
        <div class="two column computer only row">
          <div class="ten wide column">ten wide column computer only</div>
          <div class="six wide column">six wide column computer only</div>
        </div>
        <div class="sixteen wide mobile only column">sixteen wide column mobile only</div>
        <div class="three column computer only row">
          <div class="column">computer only row</div>
          <div class="column">computer only row</div>
          <div class="column">computer only row</div>
        </div>
        <div class="two column mobile only row">
          <div class="column">mobile only column</div>
          <div class="column">mobile only column</div>
        </div>
        <div class="two column row">
          <div class="column">column</div>
          <div class="column">column</div>
        </div>
      </div>

  </div>


<style type="text/css">

/* Some basic formatting */
code {
  background-color: #E0E0E0;
  padding: 0.25em 0.3em;
  font-family: 'Lato';
  font-weight: bold;
}
.container {
  padding: 5em 0em;
}
.ui.dividing.header,
.first {
  margin-top: 5em;
}

.ui.dividing.header:first-child {
  margin-top: 0em;
}

h1,
h3 {
  margin-top: 10em;
}

img {
  display: block;
  max-width: 100%;
}
img + img {
  margin-top: 0.5em;
}

/* Shows content box (not negative margins) */
.grid {
  position: relative;
}
.grid:before {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: #F0F0F0;
  content: '';
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  box-shadow: 0px 0px 0px 1px #DDDDDD inset;
}
.ui.divided.grid:before,
.celled.grid:before {
  display: none;
}
.ui.aligned .column:after {
  display: none !important;
}
.grid .column:not(.row):not(.grid):after {
  background-color: rgba(86, 61, 124, .15);
  box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
  content: "";
  display: block;
  min-height: 50px;
}
@media only screen and (max-width: 768px) {
  .stackable.grid:before {
    width: 100%;
    left: 0em;
  }
}
</style>
</body>

</html>
